<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/backstage/css/layui.css}"  media="all">
    <script th:src="@{/static/backstage/js/jquery-2.1.1.js}" charset="utf-8"></script>
</head>
<body>
<style>
    body::-webkit-scrollbar{
        width:10px;
    }
    body::-webkit-scrollbar-track{
        /*background: #999;*/
        background: #fff;
        border-radius:2px;
    }
    body::-webkit-scrollbar-thumb{
        /*background: red;*/
        background: #F0F0F0;
        border-radius:10px;
    }
    body::-webkit-scrollbar-thumb:hover{
        /*background: #333;*/
        background: #F0F0F0;
    }
    body::-webkit-scrollbar-corner{
        /*background: #179a16;*/
        background: #fff;
    }
    .box {
        position: fixed;
        right: 10px;
        bottom: 10px;
        height: 30px;
        width: 50px;
        text-align: center;
        padding-top: 20px;
        background-color: lightblue;
        border-radius: 20%;
        overflow: hidden;
    }
    .box:hover:before {
        top: 50%
    }
    .box:hover .box-in {
        visibility: hidden;
    }
    .box:before {
        position: absolute;
        top: -50%;
        left: 50%;
        transform: translate(-50%, -50%);
        content: '回到顶部';
        width: 40px;
        color: peru;
        font-weight: bold;
    }
    .box-in {
        visibility: visible;
        display: inline-block;
        height: 20px;
        width: 20px;
        border: 3px solid black;
        border-color: white transparent transparent white;
        transform: rotate(45deg);
    }
</style>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>网站信息</legend>
</fieldset>
<ul class="layui-timeline" th:id="'timeline_ul'"></ul>
<canvas id="canvas" width="1800px" height="800px" style="width: 55%;height: 50%;position: absolute;top: 11%;left: 45%;"></canvas>
<script th:inline="javascript">
    var scale = 2;
    var canvas = document.getElementById('canvas');
    var articleCount = [[${countMap.get('articleCount')}]];
    var categoryCount = [[${countMap.get('categoryCount')}]];
    var tagCount = [[${countMap.get('tagCount')}]];
    var userCount = [[${countMap.get('userCount')}]];
    var config = {
        width: canvas.width,
        height: canvas.height,
        Left: 70,
        Top: 100,
        Right: 60,
        Bottom: 60,
        color: ["#5266d7"],
        yLine:{
            splitcount: 5,
            data:[0,5,10,15,20,25]
        },
        xLine:{
            splitcount: 3,
            data:["博文","分类","标签","个人信息"]
        },
        series:{
            data:[articleCount,categoryCount,tagCount,userCount]
        }
    }

    var ctx = canvas.getContext('2d');
    // 绘制title
    drawText('单位: 次', config.Left, config.Top - 30, 'normal 26px Arial', '#a3a2a7');
    // 绘制网格线
    darwBackLine('#cccccc', config.yLine.splitcount, 1, config.yLine.data);
    // 绘制x轴
    drawXLine('#939099', config.xLine.splitcount, 2, config.xLine.data);
    // 绘制线条
    drawLines(config.color[0], 3,config.series.data);
    // 绘制图例
    drawItem('当日操作次数', config.color[0], 3);

    function darwBackLine(color, splitcount, linewidth, data) {
        var len = Math.floor((config.height - config.Top - config.Bottom)/splitcount);
        var start = config.Top;
        for (var i = 0; i < splitcount; i++) {
            var point = start+len*i;
            drawLine(config.Left, point, (config.width/2 - config.Right)*scale, point, color, linewidth);
            drawText(data[splitcount-i], 10, point, 'normal 26px Arial', '#605d68');
        }
        drawText(data[splitcount-i], 10, point+len, 'normal 26px Arial', '#605d68');
    }
    function drawXLine(color, splitcount, linewidth, data) {
        var left = config.Left;
        var top = config.height - config.Bottom;
        var right = (config.width/2 - config.Right)*scale;
        drawLine(config.Left, top, right, top, color, linewidth);
        var len = (right - left)/splitcount;
        for (var i = 0; i < splitcount+1; i++) {
            var xpoint = left+len*i;
            drawLine(xpoint,top+linewidth,xpoint, top-5*scale, color, linewidth);
            var PanningLeft = data[i].toString().length*5;
            drawText(data[i], xpoint-PanningLeft, top+15*scale, 'normal 26px Arial', '#605d68')
        }
    }
    function drawLines(color, linewidth, data) {
        var count = data.length;
        var left = config.Left;
        var top = config.height - config.Bottom;
        var right = (config.width/2 - config.Right)*scale;
        var len = (right - left)/(count - 1);
        var i = 0;
        var interval = setInterval(function() {
            if(i >= count - 1){
                clearInterval(interval);
                return;
            }
            drawLine(left+len*i, top-(data[i]/25)*(top - config.Top), left+len*(i+1), top-(data[i+1]/25)*(top - config.Top), color, linewidth, 'bevel');
            i++;
        }, 150);
    }
    function drawItem(text, color, linewidth) {
        var right = (config.width/2.5 - config.Right)*scale;
        var left = right-(text.length*10);
        drawText(text, left, config.Top - 40, 'normal 26px Arial', '#605d68');
        drawLine(left-20, config.Top - 45, left-80, config.Top - 45, color, linewidth);
    }
    function drawLine(startX, startY, endX, endY, color, width, lineJoin) {
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(endX, endY);
        if(color){
            ctx.strokeStyle = color
        }
        if(width){
            ctx.lineWidth = width*scale;
        }
        if(lineJoin){
            ctx.lineJoin = lineJoin;
        }
        ctx.closePath();
        ctx.stroke();
    }
    function drawText(text, x, y, font, color) {
        ctx.font= font;
        ctx.fillStyle= color;
        ctx.fillText(text, x, y);
    }
</script>
<!--回到顶层-->
<div id="box" class="box">
    <div class="box-in"></div>
</div>
<script>
    var timer = null;
    box.onclick = function() {
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn() {
            var oTop = document.body.scrollTop || document.documentElement.scrollTop;
            if (oTop > 0) {
                document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                timer = requestAnimationFrame(fn);
            } else {
                cancelAnimationFrame(timer);
            }
        });
    }
</script>
</body>
<script th:src="@{/static/backstage/js/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">
    $(function () {
        $.get(
            "/backstage/queryTimeLine",
            "action=queryTimeLine",
            function (data) {
                $.each(data, function (i, item) {
                    var splits = new Array();
                    splits = item.logDescription.split(',');
                    // console.log(splits);
                    var logDate = new Date(item.logDate);
                    var year = logDate.getFullYear();
                    var month = logDate.getMonth()+1;
                    var day = logDate.getDate();
                    var time = logDate.getHours()+"点"+logDate.getMinutes()+"分"+logDate.getSeconds()+"秒";
                    $timeLine_Li = $(
                        "<li class=\"layui-timeline-item\">"+
                        "<i class='layui-icon layui-timeline-axis' style='border: 2px solid #5FB878;width: 12px;left: -2px;top: 2px;height: 12px;'></i>"+
                        "<div class=\"layui-timeline-content layui-text\" style='line-height: 30px;'>"+
                        "<h2 class=\"layui-timeline-title\" style='letter-spacing: 1px;font-size: 20px;'>"+ month+"月"+day+"日"+"  "+ time +"</h2>"+
                        "<p style='font-size: 16px'>"+ "描述：" + splits[0]+splits[1] +"</p>"+
                        "<p style='font-size: 16px'>"+ "操作IP地址：" +splits[2] +"</p>"+
                        "<p style='font-size: 16px'>"+ "操作方式：" + splits[3] +"</p>"+
                        "<p style='font-size: 16px;width: 400px;overflow: hidden;word-break: break-all;word-wrap: break-word'>"+ "请求URL：" + splits[4] +"</p>"+
                        "<p style='font-size: 16px'>"+ "操作年份：" + year +"</p>"+
                        "</div>" +
                        "</li>"
                    );
                    $("#timeline_ul").append($timeLine_Li);

                })
                layui.use('element', function() {
                    var element = layui.element;
                    element.init();
                });
            }
        )
    })
</script>

</html>